<template>
	<view
class="u-loadmore" :style="[
		$u.addStyle(customStyle),
		{
			backgroundColor: bgColor,
			marginBottom: $u.addUnit(marginBottom),
			marginTop: $u.addUnit(marginTop),
			height: $u.addUnit(height),
		},
	]">
		<u-line v-if="line" length="140rpx" :color="lineColor" :hairline="false" :dashed="dashed"></u-line>
		<!-- 加载中和没有更多的状态才显示两边的横线 -->
		<slot name="icon" :status="status"></slot>
		<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-loadmore__content">
			<view v-if="status === 'loading' && icon" class="u-loadmore__content__icon-wrap">
				<u-loading-icon :color="iconColor" :size="iconSize" :mode="loadingIcon"></u-loading-icon>
			</view>
			<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
			<text
class="u-line-1" :style="[loadTextStyle]"
				:class="[(status == 'nomore' && isDot == true) ? 'u-loadmore__content__dot-text' : 'u-loadmore__content__text']"
				@tap="loadMore">{{ showText }}</text>
		</view>
		<u-line v-if="line" length="140rpx" :color="lineColor" :hairline="false" :dashed="dashed"></u-line>
	</view>
</template>

<script>
import props from './props.js';
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';

/**
 * loadmore 加载更多
 * @description 此组件一般用于标识页面底部加载数据时的状态。
 * @tutorial https://www.uviewui.com/components/loadMore.html
 * @property {String}			status			组件状态（默认 'loadmore' ）
 * @property {String}			bgColor			组件背景颜色，在页面是非白色时会用到（默认 'transparent' ）
 * @property {Boolean}			icon			加载中时是否显示图标（默认 true ）
 * @property {String | Number}	fontSize		字体大小（默认 14 ）
 * @property {String | Number}	iconSize		图标大小（默认 17 ）
 * @property {String}			color			字体颜色（默认 '#606266' ）
 * @property {String}			loadingIcon		加载图标（默认 'circle' ）
 * @property {String}			loadmoreText	加载前的提示语（默认 '加载更多' ）
 * @property {String}			loadingText		加载中提示语（默认 '正在加载...' ）
 * @property {String}			nomoreText		没有更多的提示语（默认 '没有更多了' ）
 * @property {Boolean}			isDot			到上一个相邻元素的距离 （默认 false ）
 * @property {String}			iconColor		加载中图标的颜色 （默认 '#b7b7b7' ）
 * @property {String}			lineColor		线条颜色（默认 #E6E8EB ）
 * @property {String | Number}	marginTop		上边距 （默认 10 ）
 * @property {String | Number}	marginBottom	下边距 （默认 10 ）
 * @property {String | Number}	height			高度，单位px （默认 'auto' ）
 * @property {Boolean}			line			是否显示左边分割线  （默认 false ）
 * @property {Boolean}			dashed		// 是否虚线，true-虚线，false-实线  （默认 false ）
 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
 */
export default {
	name: "ULoadmore",
	mixins: [mpMixin, mixin, props],
	data () {
		return {
			// 粗点
			dotText: "●"
		}
	},
	computed: {
		// 加载的文字显示的样式
		loadTextStyle () {
			return {
				color: this.color,
				fontSize: uni.$u.addUnit(this.fontSize),
				lineHeight: uni.$u.addUnit(this.fontSize),
				backgroundColor: this.bgColor,
			}
		},
		// 显示的提示文字
		showText () {
			let text = '';
			if (this.status == 'loadmore') text = this.loadmoreText
			else if (this.status == 'loading') text = this.loadingText
			else if (this.status == 'nomore' && this.isDot) text = this.dotText;
			else text = this.nomoreText;
			return text;
		}
	},
	methods: {
		loadMore () {
			// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
			if (this.status == 'loadmore') this.$emit('loadmore');
		}
	}
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-loadmore {
	@include flex(row);
	align-items: center;
	justify-content: center;
	flex: 1;

	&__content {
		margin: 0 6px;
		@include flex(row);
		align-items: center;
		justify-content: center;

		&__icon-wrap {
			margin-right: 8px;
		}

		&__text {
			font-size: 14px;
			color: $u-content-color;
		}

		&__dot-text {
			font-size: 15px;
			color: $u-tips-color;
		}
	}
}
</style>
